<template>
  <div class="show-detail" @click="closeDetail">
    <div class="detail" @click.stop>
      <a-icon type="close" class="close-button" @click="close"></a-icon>
      <p class="title">订单详情</p>
      <div class="detail-content">
        <table class="main">
          <tr>
            <th>订单编号</th>
            <td>{{ detailData.orderNo }}</td>
          </tr>
          <tr>
            <th>用户id</th>
            <td>{{ detailData.userId }}</td>
          </tr>
          <tr>
            <th>订单渠道</th>
            <td>{{ detailData.channel }}</td>
          </tr>
          <tr>
            <th>订单状态</th>
            <td>
              <order-status :text="detailData.status"></order-status>
            </td>
          </tr>
          <tr>
            <th>支付渠道</th>
            <td>
              <pay-channel :text="detailData.payChannel"></pay-channel>
            </td>
          </tr>
          <tr>
            <th>用户留言</th>
            <td>{{ detailData.payChannel }}</td>
          </tr>
          <tr>
            <th>收货信息</th>
            <td>（收货人）{{ detailData.consignee }}（手机号）{{ detailData.phone }}（地址）{{ detailData.province + detailData.city + detailData.county + detailData.address }}</td>
          </tr>
          <tr>
            <th>商品信息</th>
          </tr>
        </table>
        <table class="bottom">
          <tr>
            <td>名称</td>
            <td>规格</td>
            <td>商品数量</td>
            <td>单位</td>
            <td>总价（单价*数量）</td>
          </tr>
          <tr v-for="item of detailData.skuList" :key="item.id">
            <td>{{ item.spuTitle }}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.num }}</td>
            <td>{{ item.unit }}</td>
            <td>{{ item.price / 100 }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import OrderStatus from '@/components/Tag/OrderStatus'
import PayChannel from '@/components/Tag/PayChannel'
export default {
  name: 'DetailShow',
  props: {
    detailData: Object
  },
  components: {
    OrderStatus,
    PayChannel
  },
  methods: {
    closeDetail () {
      this.$emit('closeDetail')
    },
    close () {
      this.$emit('closeDetail')
    }
  }
}
</script>

<style scoped lang="less">
.show-detail {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(0,0,0,.4);
    .detail {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 50%;
        height: 670px;
        background: #fff;
        padding: 30px;
        .close-button {
          font-size: 20px;
          cursor: pointer;
          position: absolute;
          right: 20px;
          top: 20px;
        }
        .title {
        font-size: 20px;
      }
        .detail-content {
          font-size: 15px;
          .main {
            tr {
              height:55px;
              line-height: 55px;
              td {
                padding-left: 20px;
              }
            }
          }
          .bottom {
            text-align: center;
            width: 100%;
            border: 1px #eaeaea solid;
            font-size: 14px;
            color: #999;
            font-weight: 600;
            tr {
              height: 45px;
              &:hover {
                background: rgba(19, 194, 194, 0.1);
              }
              td {
                border: 1px #eaeaea solid;
                width: 20%;
              }
            }
          }
        }
    }
}
</style>
